<template>
  <div class="outer">
    <el-popover
      trigger="hover"
      :width="250"
      placement="bottom"
      class="demo-rich-content"
      style="width: 300px"
    >
    <template #reference>
        <div class="avatar-container">
          <el-image class="avatar-image" :src="avatarUrl">
          </el-image>
        </div>
      </template>
      <template #default>
        <div
          class="rich-conent"
          style="display: flex; gap: 16px; 
          flex-direction: column;
          align-items: center;
         
          "
        >
          <el-avatar
            :size="60"
            :src="avatarUrl"
            style="margin-bottom: 3px"
          />
            
            <div class="username"  style="margin: 0; font-weight: 500"> {{ username }}</div>
            <div class="moreWrap"
             style="display: flex;
              justify-content:space-evenly;
              align-items:center;
         
              flex-direction: column;
              height: 100px;
            
              width:100%;
              "

            >
            <div style="height:40%;width:90%;
            display:flex;
            align-items:center;
            justify-content:space-evenly;
            ">
                <div style="display:flex;justify-content:center;align-items: center;flex:1;height:90%;"><i class="iconfont">&#xe609;</i></div>
                <div style="flex:5;height:90%;display:flex;align-items: center;"><span style="font-weight: 500;">个人中心</span></div>
                <div style="display:flex;justify-content:center;align-items: center;flex:1;height:90%;"><i class="iconfont">&#xe613;</i></div>
                
            </div>
            <div style="height:40%;width:90%;
            display:flex;
            align-items:center;
            justify-content:space-evenly;
           
            ">
                <div style="display:flex;justify-content:center;align-items: center;flex:1;height:90%;"><i class="iconfont">&#xe77c;</i></div>
                <div style="flex:5;height:90%;display:flex;align-items: center;"><span style="font-weight: 500;">积分服务</span></div>
                <div style="display:flex;justify-content:center;align-items: center;flex:1;height:90%;"><i class="iconfont">&#xe613;</i></div>
                
            </div>

            </div>
            <div class="logout" 
            style="
            height:60px;
            width: 100%;
            border-top: 2px solid rgb(230, 232, 233);
            display: flex;
            justify-content: center;
            align-items: center;
          
            "
            >
            <div @click="handleAuthAction" style="height:50%;width:90%;
            display:flex;
            align-items:center;
            justify-content:space-evenly;
            cursor: pointer;
          
            ">
                <div style="display:flex;justify-content:center;align-items: center;flex:1;height:100%;"><i class="iconfont">&#xe62f;</i></div>
                <div style="flex:5;height:100%;display:flex;align-items: center;"><span style="font-weight: 500;">{{ isLoggedIn ? '退出登录' : '登录' }}</span></div>
                <div style="display:flex;justify-content:center;align-items: center;flex:1;height:100%;"><i class="iconfont">&#xe613;</i></div>
                
            </div>
            </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref,computed } from 'vue';
import { ElPopover } from 'element-plus';
import{useRouter} from "vue-router";
import { useAuthStore } from "@/store/userInfo";
const authStore = useAuthStore();
const router = useRouter();

const props = defineProps<{
  avatarUrl: String
}>();
const emit = defineEmits(['logout']);
const isLoggedIn = computed(() => authStore.username !== '');
const username = computed(() => isLoggedIn.value ? authStore.username : '未登录');
const handleAuthAction = () => {
  if (isLoggedIn.value) {
    // 用户已登录，执行登出操作
    authStore.$reset();
    sessionStorage.removeItem('auth');
    // 不跳转，只清除登录信息
    emit('logout');
  } else {
    // 用户未登录，跳转到登录页面
    router.push('/login');
  }
};
</script>

<style scoped lang="less">
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4410292 */
  src: url('//at.alicdn.com/t/c/font_4410292_vt2p08jcbm9.woff2?t=1715949467351') format('woff2'),
       url('//at.alicdn.com/t/c/font_4410292_vt2p08jcbm9.woff?t=1715949467351') format('woff'),
       url('//at.alicdn.com/t/c/font_4410292_vt2p08jcbm9.ttf?t=1715949467351') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
.outer{
  width:100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.avatar-image {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
}
</style>